<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/layui.css" media="all">
    <!-- 引入模拟数据 -->
    <script src="./js/data.js"></script>
    <!-- Layui js -->
    <script src="./layui.js"></script>
    <!-- 修改Layui的源码 -->
    <script src="./setLayui.js"></script>

</head>

<body>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>常规用法</legend>
    </fieldset>
    <div id="test1" class="demo-tree demo-tree-box"></div>
    <script>
        var ss = 0;
        layui.use(['tree', 'util'], function () {
            var tree = layui.tree
                , layer = layui.layer
                , util = layui.util;
            //常规用法
            var inst1 = tree.render({
                elem: '#test1' //默认是点击节点可进行收缩
                , id: 'test1'
                , data: [{
                id: '144115188075855872'
                , title: '哈尔滨市第三中学'
                , spread: true
                , children: [{
                    id: '144396663052566528'
                    , title: '2016级学生'
                    , children: [{
                        id: '144397762564194304'
                        , title: '2016级一班'
                    }, {
                        id: '144398862075822080'
                        , title: '2016级二班'
                    }, {
                        id: '144399961587449856'
                        , title: '2016级三班'
                    }]
                }]
            }, {
                id: '144678138029277184'
                , title: '教职工'
                , spread: false
                , children: []
            }]
                ,spread: function (obj) {

                    tree.children(inst1.config.id, obj.data.id, [{
                            id: ss++
                            , title: '子节点1'
                        }, {
                            id: ss++
                            , title: '子节点2'
                            , spread: false
                            , children: []
                        }]);
                }

            });
            console.log(tree)

        })

    </script>

</body>

</html>